import { View, Text } from "@tarojs/components";
import { AtCard, AtModal, AtModalContent } from "taro-ui";
// eslint-disable-next-line import/first
import { UserPanel as UserPanelType, Card as CardType, Gem as GemType } from '@/types/global';
import "./index.less";

interface PlayerCardsProps {
  isOpen: boolean;
  onClose: () => void;
  playerName: string;
  userPanel?: UserPanelType;
}

export default function PlayerCards({ isOpen, onClose, playerName, userPanel }: PlayerCardsProps) {
  // 如果没有传入userPanel数据，则使用示例数据
  const panelData: UserPanelType = userPanel || {
    userIp: playerName === '玩家1' ? 'player1' : 'player2',
    score: 15,
    crownsNum: 2,
    collectedGems: [],
    isReady: false,
    discountRed: 1,
    discountBlue: 0,
    discountGreen: 2,
    discountWhite: 0,
    discountBlack: 1,
    gemNumRed: 3,
    gemNumBlue: 2,
    gemNumGreen: 1,
    gemNumWhite: 2,
    gemNumBlack: 4,
    gemNumGold: 1,
    gemNumPink: 0,
    gemNumTotal: 13,
    cardBought: [
      {
        id: "1",
        level: 1,
        score: 1,
        discountRed: 0,
        discountBlue: 0,
        discountGreen: 1,
        discountWhite: 0,
        discountBlack: 0,
        costRed: 2,
        costBlue: 0,
        costGreen: 1,
        costPink: 0,
        costBlack: 0,
        costWhite: 0,
        crownsNum: 0,
        extraReward: { type: "", value: 0 },
        show: true,
        buyable: true
      },
      {
        id: "2",
        level: 1,
        score: 2,
        discountRed: 0,
        discountBlue: 0,
        discountGreen: 0,
        discountWhite: 0,
        discountBlack: 1,
        costRed: 1,
        costBlue: 1,
        costGreen: 0,
        costPink: 0,
        costBlack: 2,
        costWhite: 0,
        crownsNum: 0,
        extraReward: { type: "", value: 0 },
        show: true,
        buyable: true
      }
    ] as CardType[],
    cardKept: [
      {
        id: "3",
        level: 1,
        score: 1,
        discountRed: 0,
        discountBlue: 0,
        discountGreen: 0,
        discountWhite: 1,
        discountBlack: 0,
        costRed: 0,
        costBlue: 0,
        costGreen: 2,
        costPink: 0,
        costBlack: 1,
        costWhite: 1,
        crownsNum: 0,
        extraReward: { type: "", value: 0 },
        show: true,
        buyable: true
      }
    ] as CardType[],
    privilege: 3
  };

  // 合并已购买和保留的卡片
  const allCards = [...panelData.cardBought, ...panelData.cardKept];

  // 将卡片数据转换为显示格式
  const convertCardToDisplayFormat = (card: CardType) => {
    return {
      id: card.id,
      name: `等级${card.level}卡片`,
      gemCost: {
        red: card.costRed,
        blue: card.costBlue,
        green: card.costGreen,
        white: card.costWhite,
        black: card.costBlack,
        pink: card.costPink || 0
      },
      points: card.score,
      discount: card.discountRed > 0 ? 'red' : 
                card.discountBlue > 0 ? 'blue' : 
                card.discountGreen > 0 ? 'green' : 
                card.discountWhite > 0 ? 'white' : 
                card.discountBlack > 0 ? 'black' : 'none'
    };
  };

  return (
    <AtModal isOpened={isOpen} onClose={onClose}>
      <AtModalContent>
        <View className='playerCardsContainer'>
          <View className='modal-header'>
            <Text className='modal-title'>{playerName}的卡片</Text>
          </View>
          
          <View className='cards-list'>
            {allCards.map(card => {
              const displayCard = convertCardToDisplayFormat(card);
              return (
                <AtCard 
                  key={card.id} 
                  title={displayCard.name}
                  className='player-card'
                >
                  <View className='card-content'>
                    <View className='card-points'>
                      <Text>分数: {displayCard.points}</Text>
                    </View>
                    
                    <View className='card-cost'>
                      <Text>费用:</Text>
                      <View className='gems-cost'>
                        {Object.entries(displayCard.gemCost).map(([color, count]) => 
                          count > 0 ? (
                            <View key={color} className={`gem-cost ${color}-gem`}>
                              <Text>{count}</Text>
                            </View>
                          ) : null
                        )}
                      </View>
                    </View>
                    
                    <View className='card-discount'>
                      <Text>折扣: </Text>
                      {displayCard.discount !== 'none' && (
                        <View className={`discount-gem ${displayCard.discount}-gem`}></View>
                      )}
                    </View>
                  </View>
                </AtCard>
              );
            })}
          </View>
          
          <View className='modal-footer'>
            <Text className='close-btn' onClick={onClose}>关闭</Text>
          </View>
        </View>
      </AtModalContent>
    </AtModal>
  );
}